<template>
  <div>
    <Table border :columns="columns" :data="dataForm" size="large" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买"></Table>
    <div class="go-to">
      <template>
        <i-button type="error" @click="delAll">一键删除</i-button>
      </template>
      <Button @click="goTo" type="primary">去付款</Button>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'MyShoppingCart',
    //注入依赖
    inject: ['reload'],

    data() {
      return {
        columns: [{
            title: '店铺名',
            key: 'store',
          }, {
            title: '名称',
            key: 'name',
          },
          {
            title: '图片',
            key: 'img_url',

            render: (h, params) => {
              return h('div', {
                style: {
                  width: '10%',
                  height: '10%',
                  background: '#ccc'
                }
              }, [
                h('img', {
                  attrs: {
                    src: params.row.img_url
                  }
                })
              ]);
            },
            align: 'center'
          },
          {
            title: '原价',
            key: 'original_price'
          },
          {
            title: '促销价',
            key: 'promote_price'
          },
          {
            title: '数量',
            key: 'shopcart_num'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.pid)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        dataForm: [
          // {
          //   store: ' ',
          //   name: ' ',
          //   img_url: ' ',
          //   promote_price: 0,
          //   original_price: 0,
          //   shopcart_num: 0,
          //   pid: ''
          // },

        ]
      }
    },
    methods: {
      // show(index) {
      //   this.$Modal.info({
      //     title: 'User Info',
      //     content: `Name：${this.dataForm[index].name}<br>Age：${this.dataForm[index].age}<br>Address：${this.dataForm[index].address}`
      //   })
      // },
      // 删除某件商品
      remove(index) {
        let user = sessionStorage.getItem('loginInfo');
        let userinfo = (JSON.parse(user));
        this.$http.delete('/shopCart/del/' + userinfo.id + '/' + index)
          .then(resp => {
            // this.$Message.success('删除成功', 3);
            this.$Message.success('删除成功');
            this.reload()
          }).catch(err => {
            this.$Message.error("删除失败")
        })
      },
      // 一键删除所有
      delAll() {
        let user = sessionStorage.getItem('loginInfo');
        let userinfo = (JSON.parse(user));
        this.$http.delete('/shopCart/del/' + userinfo.id)
          .then(resp => {
            // this.$Message.success('全部删除', 3);
            this.$Message.success('全部删除');
            this.reload()
          }).catch(err => {
            this.$Message.error("删除全部失败")
        })
      },
      // 去付款
      goTo() {
        this.$router.push({path: '/Order'})
      }
    },
    created: function() {
      const _this = this;
      let user = sessionStorage.getItem('loginInfo');
      let userinfo = (JSON.parse(user));
      _this.$http.get('/shopCart/findShopCart/' + userinfo.id)
        .then(resp => {
          _this.dataForm = resp.data.data
          _this.dataForm.forEach(item => {
            item.img_url = item.img_url;
            item.img_url = "http://img14.360buyimg.com/n5/"+item.img_url.split('n1/')[1];
          });
        });
    }
  }
</script>

<style scoped>
  .go-to {
    margin: 15px;
    display: flex;
    justify-content: flex-end;
  }

  button {
    margin-right: 30px;
  }
</style>
